<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Airdrop Checker Plugin (Web3 Redesign)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0; 
        }

        .font-roboto-mono {
            font-family: 'Roboto Mono', monospace;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px; 
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent; 
        }
        ::-webkit-scrollbar-thumb {
            background: #9ca3af; /* gray-400 */
            border-radius: 3px;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #4b5563; /* gray-600 */
        }
        /* Theme specific scrollbars */
        .theme-cyberpunk ::-webkit-scrollbar-thumb { background: #00f0ff; }
        .theme-forest ::-webkit-scrollbar-thumb { background: #4ade80; }
        .theme-sunset ::-webkit-scrollbar-thumb { background: #FF8C00; } /* DarkOrange */
        .theme-oceanic ::-webkit-scrollbar-thumb { background: #20B2AA; } /* LightSeaGreen */


        /* Modal Wrapper Styles */
        #airdrop-plugin-wrapper {
            transition: opacity 0.25s ease-out, visibility 0.25s ease-out; /* Faster transition */
        }
        #airdrop-plugin-wrapper.modal-hidden {
            opacity: 0;
            visibility: hidden;
        }
        #airdrop-plugin-wrapper.modal-visible {
            opacity: 1;
            visibility: visible;
        }


        /* Mobile slide-up animation for the modal itself */
        @media (max-width: 767px) {
            #airdrop-checker-modal.slide-up-mobile-active {
                transform: translateY(0%);
            }
            #airdrop-checker-modal {
                transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Faster animation */
                transform: translateY(100%); /* Initially hidden */
            }
        }
        /* Desktop fade-in animation for the modal itself */
        @media (min-width: 768px) {
            #airdrop-checker-modal.fade-in-desktop-active {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            #airdrop-checker-modal {
                transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Faster */
                opacity: 0;
                transform: scale(0.95) translateY(10px); 
            }
        }
        
        /* Countdown flip animation */
        .flip-animate-container { 
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            width: auto; 
            min-width: 38px; 
            height: 38px; 
            line-height: 38px; 
            overflow: hidden; 
            text-align: center;
            padding-left: 0.25rem; 
            padding-right: 0.25rem;
        }
        .flip-animate {
            display: inline-block; 
            animation: flipVertical 0.5s ease-in-out; 
        }
        @keyframes flipVertical {
            0% { transform: perspective(150px) rotateX(0deg); opacity: 1; }
            49% { transform: perspective(150px) rotateX(90deg); opacity: 0; }
            50% { transform: perspective(150px) rotateX(-90deg); opacity: 0; } 
            100% { transform: perspective(150px) rotateX(0deg); opacity: 1; }
        }

        .pulse-indicator { animation: pulseIndicator 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1); }
        @keyframes pulseIndicator { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.25); } }
        .loader { border-width: 3px; border-style: solid; border-radius: 50%; width: 22px; height: 22px; animation: spin 0.8s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .float-gift { animation: floatGift 2.8s ease-in-out infinite; }
        @keyframes floatGift { 0% {transform: translateY(0px);} 50% {transform: translateY(-15px);} 100% {transform: translateY(0px);} }
        .particles-success { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; z-index: 0; }
        .particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; animation: particle-effect 2s ease-out forwards; }
        @keyframes particle-effect { 0% { transform: translate(var(--start-x), var(--start-y)) scale(0.2); opacity: 0; } 20% { opacity: 1; transform: scale(1.3); } 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.1); opacity: 0; } }
        .timeline-node::before { content: ''; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; border: 3px solid; background-color: var(--theme-bg-surface); z-index: 2; transition: all 0.3s ease; }
        .timeline-node.active::before { width: 18px; height: 18px; top: -6px; animation: pulseNode 1.5s infinite; }
        .timeline-node.completed::before { background-color: currentColor; }
        .timeline-connector { position: absolute; top: 2px; left: calc(16.66% + 10px); right: calc(16.66% + 10px); height: 3px; z-index: 1; border-radius: 2px; }
        @keyframes pulseNode { 0% { box-shadow: 0 0 0 0px var(--pulse-node-color-alpha); } 50% { box-shadow: 0 0 0 6px var(--pulse-node-color-alpha); } 100% { box-shadow: 0 0 0 0px var(--pulse-node-color-alpha); } }
        .card-shadow { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
        .dark .card-shadow { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.3); }
        .theme-cyberpunk .card-shadow { box-shadow: 0 0 15px 2px var(--cyber-primary-DEFAULT, #00F0FF), 0 0 5px var(--cyber-secondary-DEFAULT, #FF00FF); }
        .theme-forest .card-shadow { box-shadow: 0 8px 20px -3px rgba(34,139,34,0.4), 0 6px 8px -4px rgba(34,139,34,0.3); }
        .theme-sunset .card-shadow { box-shadow: 0 8px 20px -3px rgba(255,100,0,0.4), 0 6px 8px -4px rgba(255,100,0,0.3); }
        .theme-oceanic .card-shadow { box-shadow: 0 8px 20px -3px rgba(0,100,200,0.4), 0 6px 8px -4px rgba(0,100,200,0.3); }

        #loading-overlay { transition: opacity 0.3s ease-in-out; }
        #timeline-status-section.hidden-for-result { display: none !important; }

    </style>
    <script>
        // Tailwind config with multiple themes
        tailwind.config = {
            darkMode: 'class', 
            theme: {
                extend: {
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                        'roboto-mono': ['Roboto Mono', 'monospace'],
                    },
                    colors: {
                        // Default Theme (Web3 Blue)
                        'web3-primary': { light: '#3B82F6', DEFAULT: '#2563EB', dark: '#1D4ED8', rgb: '37, 99, 235', textOn: '#FFFFFF' }, 
                        'web3-secondary': { light: '#EBF4FF', DEFAULT: '#D1E3FF', dark: '#BFD7FF' }, 
                        'web3-bg': { light: '#F9FAFB', dark: '#030712' }, 
                        'web3-surface': { light: '#FFFFFF', dark: '#111827' }, 
                        'web3-text': { light: '#1F2937', dark: '#E5E7EB' }, 
                        'web3-text-secondary': { light: '#4B5563', dark: '#9CA3AF' }, 
                        'web3-border': { light: '#D1D5DB', dark: '#374151' }, 
                        'web3-success': { light: '#D1FAE5', DEFAULT: '#10B981', dark: '#059669', particle: '#34D399', textOn: '#FFFFFF' }, 
                        'web3-error': { light: '#FEE2E2', DEFAULT: '#EF4444', dark: '#DC2626', textOn: '#FFFFFF' },
                        'web3-warning': { light: '#FEF3C7', DEFAULT: '#F59E0B', dark: '#D97706', textOn: '#1F2937' }, 
                        'loader-border': { light: '#D1D5DB', dark: '#4B5563'}, 
                        'loader-top': {light: '#2563EB', dark: '#3B82F6'}, 

                        // Cyberpunk Theme
                        'cyber-primary': { DEFAULT: '#00F0FF', dark: '#00AACC', rgb: '0, 240, 255', textOn: '#0C0C1A' }, 
                        'cyber-secondary': { DEFAULT: '#FF00FF', dark: '#CC00CC', textOn: '#FFFFFF' }, 
                        'cyber-bg': { light: '#1A1A2E', dark: '#0C0C1A' }, 
                        'cyber-surface': { light: '#2A2A3E', dark: '#171727' }, 
                        'cyber-text': { light: '#E0E0FF', dark: '#F0F0FF' }, 
                        'cyber-text-secondary': { light: '#A0A0CC', dark: '#B0B0DD' },
                        'cyber-border': { DEFAULT: '#505078', dark: '#383850' }, 
                        'cyber-success': { DEFAULT: '#00FF7F', dark: '#00DD66', particle: '#00FF7F', textOn: '#0C0C1A' }, 
                        'cyber-error': { DEFAULT: '#FF4D4D', dark: '#DD0000', textOn: '#FFFFFF' },
                        'cyber-warning': { DEFAULT: '#FFD700', dark: '#CCA300', textOn: '#0C0C1A' }, 
                        'loader-border-cyber': { light: '#505078', dark: '#383850'},
                        'loader-top-cyber': {light: '#00F0FF', dark: '#00AACC'},

                        // Forest Theme
                        'forest-primary': { DEFAULT: '#228B22', dark: '#1E781E', rgb: '34, 139, 34', textOn: '#FFFFFF' }, 
                        'forest-secondary': { DEFAULT: '#D2B48C', dark: '#B8860B', textOn: '#2F4F2F' }, 
                        'forest-bg': { light: '#F5FFF5', dark: '#172517' }, 
                        'forest-surface': { light: '#FFFFFF', dark: '#223322' }, 
                        'forest-text': { light: '#2F4F2F', dark: '#D0E0D0' }, 
                        'forest-text-secondary': { light: '#556B2F', dark: '#A9BDA9' },
                        'forest-border': { DEFAULT: '#A7C7A7', dark: '#455B45' }, 
                        'forest-success': { DEFAULT: '#32CD32', dark: '#28A428', particle: '#32CD32', textOn: '#FFFFFF' }, 
                        'forest-error': { DEFAULT: '#CD5C5C', dark: '#B22222', textOn: '#FFFFFF' }, 
                        'forest-warning': { DEFAULT: '#FFD700', dark: '#BDB76B', textOn: '#2F4F2F' }, 
                        'loader-border-forest': { light: '#A7C7A7', dark: '#455B45'},
                        'loader-top-forest': {light: '#228B22', dark: '#1E781E'},

                        // Sunset Theme
                        'sunset-primary': { DEFAULT: '#FF7F50', dark: '#E5734B', rgb: '255, 127, 80', textOn: '#FFFFFF' }, // Coral
                        'sunset-secondary': { DEFAULT: '#FFDAB9', dark: '#E8C7A8' }, // PeachPuff
                        'sunset-bg': { light: '#FFF8DC', dark: '#2C1A0B' }, // Cornsilk / Dark Brown
                        'sunset-surface': { light: '#FFFFFF', dark: '#4A2A0A' }, // White / Darker Brown
                        'sunset-text': { light: '#5D4037', dark: '#FFE0B2' }, // Brown / Light Orange
                        'sunset-text-secondary': { light: '#A1887F', dark: '#FFCC80' }, // Lighter Brown / Lighter Orange
                        'sunset-border': { DEFAULT: '#FFCCBC', dark: '#BCAAA4' }, // Light Coral / Brownish Gray
                        'sunset-success': { DEFAULT: '#FFB347', dark: '#FFA000', particle: '#FFB347', textOn: '#2C1A0B' }, // Pastel Orange
                        'sunset-error': { DEFAULT: '#FF6347', dark: '#E5583C', textOn: '#FFFFFF' }, // Tomato
                        'sunset-warning': { DEFAULT: '#FFA500', dark: '#E59400', textOn: '#2C1A0B' }, // Orange
                        'loader-border-sunset': { light: '#FFCCBC', dark: '#BCAAA4'},
                        'loader-top-sunset': {light: '#FF7F50', dark: '#E5734B'},
                        
                        // Oceanic Theme
                        'oceanic-primary': { DEFAULT: '#00CED1', dark: '#00B8BA', rgb: '0, 206, 209', textOn: '#FFFFFF' }, // DarkTurquoise
                        'oceanic-secondary': { DEFAULT: '#AFEEEE', dark: '#98D8D8' }, // PaleTurquoise
                        'oceanic-bg': { light: '#F0FFFF', dark: '#0B2C3A' }, // Azure / Dark Teal
                        'oceanic-surface': { light: '#FFFFFF', dark: '#113C4A' }, // White / Darker Teal
                        'oceanic-text': { light: '#2F4F4F', dark: '#B0E0E6' }, // DarkSlateGray / PowderBlue
                        'oceanic-text-secondary': { light: '#5F9EA0', dark: '#87CEEB' }, // CadetBlue / SkyBlue
                        'oceanic-border': { DEFAULT: '#B0E0E6', dark: '#4682B4' }, // PowderBlue / SteelBlue
                        'oceanic-success': { DEFAULT: '#3CB371', dark: '#2E8B57', particle: '#3CB371', textOn: '#FFFFFF' }, // MediumSeaGreen
                        'oceanic-error': { DEFAULT: '#FF7F50', dark: '#E5734B', textOn: '#FFFFFF' }, // Coral (reused for contrast)
                        'oceanic-warning': { DEFAULT: '#FFD700', dark: '#BDB76B', textOn: '#0B2C3A' }, // Gold
                        'loader-border-oceanic': { light: '#B0E0E6', dark: '#4682B4'},
                        'loader-top-oceanic': {light: '#00CED1', dark: '#00B8BA'},
                    }
                }
            }
        }
    </script>
</head>
<body class="p-0 transition-colors duration-300 theme-default"> <div id="theme-switcher-controls" class="fixed top-4 right-4 z-[100] flex flex-wrap gap-2">
        <button data-theme="theme-default" class="px-3 py-1.5 text-xs font-medium bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 transition-colors">Default</button>
        <button data-theme="theme-cyberpunk" class="px-3 py-1.5 text-xs font-medium bg-purple-600 text-white rounded-md shadow hover:bg-purple-700 transition-colors">Cyberpunk</button>
        <button data-theme="theme-forest" class="px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-md shadow hover:bg-green-700 transition-colors">Forest</button>
        <button data-theme="theme-sunset" class="px-3 py-1.5 text-xs font-medium bg-orange-500 text-white rounded-md shadow hover:bg-orange-600 transition-colors">Sunset</button>
        <button data-theme="theme-oceanic" class="px-3 py-1.5 text-xs font-medium bg-teal-500 text-white rounded-md shadow hover:bg-teal-600 transition-colors">Oceanic</button>
        <button id="toggle-dark-mode" class="px-3 py-1.5 text-xs font-medium bg-gray-700 text-white rounded-md shadow hover:bg-gray-800 transition-colors">Toggle Dark</button>
    </div>

    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <button id="open-airdrop-modal-btn" class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition-colors">
            Open Airdrop Checker
        </button>
    </div>


    <div id="airdrop-plugin-wrapper" class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 dark:bg-black/85 modal-hidden p-4 sm:p-0">
        <div id="airdrop-checker-modal" 
             class="w-full max-w-lg relative flex flex-col 
                    md:rounded-xl md:max-h-[90vh] sm:rounded-t-2xl sm:absolute sm:bottom-0 sm:left-0 sm:right-0 sm:max-h-[60vh] shadow-2xl overflow-hidden ">
            <div id="loading-overlay" class="absolute inset-0 bg-black/40 dark:bg-black/60 z-[15] hidden opacity-0 items-center justify-center">
            </div>
            
            <div class="sm:block md:hidden pt-3 pb-2 flex justify-center cursor-grab bg-inherit rounded-t-2xl sticky top-0 z-20">
                <div class="w-12 h-1.5 bg-gray-400 dark:bg-gray-600 group-[.theme-cyberpunk]/body:bg-cyber-border group-[.theme-forest]/body:bg-forest-border rounded-full"></div>
            </div>

            <div class="p-6 border-b flex justify-between items-center bg-inherit modal-header sticky top-0 sm:top-auto md:top-0 z-20"> <div class="flex items-center space-x-4"> <img id="app-logo" src="https://placehold.co/48x48/1D4ED8/FFFFFF?text=AC" alt="App Logo" class="w-12 h-12 rounded-lg object-cover shadow-md"> <h1 id="app-name" class="text-2xl font-semibold">Airdrop Checker</h1> </div>
            </div>

            <div class="p-6 space-y-6 overflow-y-auto flex-grow modal-content custom-scrollbar relative"> <div class="bg-opacity-60 p-5 rounded-xl text-center project-desc-bg card-shadow"> <p id="project-desc-text" class="text-base project-desc-text-color"> This XXX Project is airdropping a total of 1,000,000 $TOKEN to eligible users.
                    </p>
                </div>

                <div id="timeline-status-section" class="space-y-5">
                    <div class="relative py-4">
                        <div class="timeline-connector bg-gray-300 dark:bg-gray-700 group-[.theme-cyberpunk]/body:bg-cyber-border group-[.theme-forest]/body:bg-forest-border">
                             <div id="timeline-progress" class="h-full theme-primary-bg" style="width: 50%;"></div>
                        </div>
                        <div class="flex justify-between">
                            <div class="timeline-node text-center theme-primary-text w-1/3">
                                <span class="block text-sm font-medium mt-2 timeline-label-color">Start</span>
                                <span class="block text-xs timeline-date-color">May 01</span>
                            </div>
                            <div class="timeline-node active text-center theme-primary-text w-1/3">
                                <span class="block text-sm font-semibold mt-2 theme-primary-text">Current</span>
                                <span class="block text-xs timeline-date-color">May 10</span>
                            </div>
                            <div class="timeline-node text-center timeline-node-inactive-color w-1/3">
                                <span class="block text-sm font-medium mt-2 timeline-label-color">End</span>
                                <span class="block text-xs timeline-date-color">May 30</span>
                            </div>
                        </div>
                    </div>

                    <div class="status-card-bg p-5 rounded-xl space-y-4 shadow-lg card-shadow"> <div class="flex justify-between items-center">
                            <span class="text-base font-medium flex items-center status-text-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="mr-2 opacity-90"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
                                Status:
                            </span>
                            <div class="px-3.5 py-1.5 text-sm font-semibold rounded-full flex items-center space-x-2 status-tag-bg status-tag-text-color">
                                <span class="w-2.5 h-2.5 status-indicator-color rounded-full pulse-indicator"></span>
                                <span>Claim Open</span>
                            </div>
                        </div>
                        <div class="text-center space-y-1.5 pt-2">
                            <p class="text-sm flex items-center justify-center countdown-label-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                Ends in:
                            </p>
                            <div id="countdown-display" class="flex justify-center items-center space-x-1.5 font-roboto-mono text-2xl font-bold countdown-value-color min-h-[48px]"> 
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="days-value" class="p-2.5 countdown-unit-bg rounded-lg shadow-inner">20</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">d</span></div>
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="hours-value" class="p-2.5 countdown-unit-bg rounded-lg shadow-inner">05</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">h</span></div>
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="minutes-value" class="p-2.5 countdown-unit-bg rounded-lg shadow-inner">42</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">m</span></div>
                                <div class="countdown-unit-container"><span class="flip-animate-container"><span id="seconds-value" class="p-2.5 countdown-seconds-bg countdown-seconds-text-color rounded-lg shadow-inner">18</span></span><span class="text-sm font-medium ml-1.5 countdown-unit-label-color">s</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-5"> 
                    <div id="query-state" class="state-container active space-y-5">
                        <div class="relative">
                            <input type="text" id="address-input"
                                   class="w-full h-14 px-5 py-3 pr-16 text-base border rounded-xl focus:ring-2 outline-none transition-all duration-200 input-bg input-text-color input-border-color focus-ring-color shadow-sm"
                                   placeholder="Enter or paste wallet address (0x...)">
                            <button id="connect-wallet-btn" title="Connect Wallet"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 p-2.5 rounded-lg transition-colors connect-wallet-icon-color hover-bg-opacity">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"></path>
                                    <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"></path>
                                    <path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"></path>
                                </svg>
                            </button>
                        </div>
                        <button id="query-button"
                                class="w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus-ring-offset query-btn-bg query-btn-text-color hover-query-btn-bg focus-ring-color shadow-md hover:shadow-lg">
                            Check Eligibility
                        </button>
                    </div>

                    <div id="loading-state" class="state-container hidden flex flex-col items-center justify-center text-center min-h-[250px] space-y-4"> 
                         <input type="text" class="w-full h-14 px-5 py-3 text-base border rounded-xl cursor-not-allowed disabled-input-bg disabled-input-text-color disabled-input-border-color"
                                   placeholder="0x..." disabled id="loading-address-input">
                        <button class="w-full h-14 text-lg text-white font-semibold rounded-xl flex items-center justify-center space-x-2.5 cursor-not-allowed disabled-btn-bg shadow-md">
                            <div class="loader loader-border-color loader-top-color"></div>
                            <span>Checking...</span>
                        </button>
                        <p class="text-sm loading-text-color pt-2">Fetching data from the blockchain, please wait.</p>
                    </div>

                    <div id="success-state" class="state-container hidden space-y-5 relative">
                        <div class="particles-success" id="success-particles"></div>
                        <div class="p-6 rounded-xl text-center space-y-5 relative z-10 success-card-bg success-card-border card-shadow">
                            <div class="inline-flex items-center justify-center w-24 h-24 rounded-full float-gift success-icon-outer-bg shadow-lg">
                                 <div class="inline-flex items-center justify-center w-20 h-20 rounded-full success-icon-inner-bg">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="success-icon-color">
                                        <path d="M20 12v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4"/>
                                        <path d="M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"/>
                                        <path d="M12 22v-8"/>
                                        <path d="m15 10-3-3-3 3"/>
                                        <path d="M4.5 10.5h15"/>
                                    </svg>
                                </div>
                            </div>
                            <h3 class="text-2xl font-semibold success-title-color">Congratulations! You are eligible!</h3>
                            
                            <div class="p-5 rounded-lg shadow-inner claim-details-bg">
                                <p class="text-base claim-details-label-color">Available to claim:</p>
                                <p class="text-4xl font-bold claim-details-value-color" id="claim-amount-token">123.45 $TOKEN</p>
                                <p class="text-base claim-details-usd-color" id="claim-amount-usd">≈ $12.34 USD</p>
                            </div>
                             <button id="claim-button"
                                    class="w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus-ring-offset claim-btn-bg claim-btn-text-color hover-claim-btn-bg focus-ring-color shadow-md hover:shadow-lg">
                                Claim Now
                            </button>
                        </div>
                    </div>

                    <div id="failure-state" class="state-container hidden space-y-5">
                        <div class="p-6 rounded-xl text-center space-y-4 failure-card-bg failure-card-border card-shadow">
                            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto failure-icon-color">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="12"></line>
                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
                            </svg>
                            <h3 class="text-2xl font-semibold failure-title-color">Sorry, this address is not eligible.</h3>
                            <p class="text-base failure-text-color">You can try another wallet address or check the event rules.</p>
                        </div>
                        <button id="recheck-button"
                                class="w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus-ring-offset recheck-btn-bg hover-recheck-btn-bg recheck-btn-text-color focus-ring-color shadow-md hover:shadow-lg">
                            Check Another Address
                        </button>
                    </div>
                </div>
            </div>
             <div class="p-4 border-t text-center footer-bg footer-border sticky bottom-0 z-20">
                <p class="text-xs footer-text-color">Powered by Gemini AI</p>
            </div>
        </div>
    </div>

    <script>
        // --- Global Config (Simulated) ---
        const APP_CONFIG = {
            APP_NAME: "Airdrop Pro", 
            APP_LOGO_DEFAULT: "https://placehold.co/48x48/2563EB/FFFFFF?text=AP&font=inter",
            APP_LOGO_CYBER: "https://placehold.co/48x48/00F0FF/0C0C1A?text=CY&font=roboto-mono",
            APP_LOGO_FOREST: "https://placehold.co/48x48/228B22/F5FFF5?text=FP&font=inter",
            APP_LOGO_SUNSET: "https://placehold.co/48x48/FF7F50/FFFFFF?text=SP&font=inter",
            APP_LOGO_OCEANIC: "https://placehold.co/48x48/00CED1/FFFFFF?text=OP&font=inter",
            PROJECT_DESC: "This demo project is airdropping 1,000,000 $DEMO tokens to lucky users.", 
            CLAIM_COIN_SYMBOL: "$DEMO",
            END_DATE_STRING: "2025-05-30T23:59:59", 
            MOCK_ELIGIBLE_AMOUNT: (Math.random() * 1000 + 50).toFixed(2),
            MOCK_USD_PRICE_PER_TOKEN: (Math.random() * 0.5 + 0.1).toFixed(4),
            CURRENT_THEME: 'theme-default', 
            FORCE_LIGHT_DARK_MODE: null, 
        };

        // --- DOM Elements ---
        const modalWrapper = document.getElementById('airdrop-plugin-wrapper');
        const modal = document.getElementById('airdrop-checker-modal');
        const openModalBtn = document.getElementById('open-airdrop-modal-btn');
        const loadingOverlay = document.getElementById('loading-overlay');
        const timelineStatusSection = document.getElementById('timeline-status-section'); 
        const appNameEl = document.getElementById('app-name');
        const appLogoEl = document.getElementById('app-logo');
        const projectDescEl = document.getElementById('project-desc-text');
        const timelineProgress = document.getElementById('timeline-progress');
        const daysValueEl = document.getElementById('days-value');
        const hoursValueEl = document.getElementById('hours-value');
        const minutesValueEl = document.getElementById('minutes-value');
        const secondsValueEl = document.getElementById('seconds-value');
        const queryStateEl = document.getElementById('query-state');
        const loadingStateEl = document.getElementById('loading-state');
        const successStateEl = document.getElementById('success-state');
        const failureStateEl = document.getElementById('failure-state');
        const addressInput = document.getElementById('address-input');
        const loadingAddressInput = document.getElementById('loading-address-input');
        const connectWalletBtn = document.getElementById('connect-wallet-btn');
        const queryButton = document.getElementById('query-button');
        const claimAmountTokenEl = document.getElementById('claim-amount-token');
        const claimAmountUsdEl = document.getElementById('claim-amount-usd');
        const claimButton = document.getElementById('claim-button');
        const recheckButton = document.getElementById('recheck-button');
        const successParticlesContainer = document.getElementById('success-particles');
        const themeSwitcherControls = document.getElementById('theme-switcher-controls');
        const toggleDarkModeBtn = document.getElementById('toggle-dark-mode');

        // --- Modal Control ---
        function showAirdropModal() {
            if (modalWrapper) {
                modalWrapper.classList.remove('modal-hidden');
                modalWrapper.classList.add('modal-visible');
                // Use requestAnimationFrame for smoother animation start
                requestAnimationFrame(() => {
                    if (window.innerWidth < 768) {
                        modal.classList.add('slide-up-mobile-active');
                    } else {
                        modal.classList.add('fade-in-desktop-active');
                    }
                });
            }
        }

        function hideAirdropModal() {
            if (modalWrapper) {
                 if (window.innerWidth < 768) {
                    modal.classList.remove('slide-up-mobile-active'); 
                } else {
                    modal.classList.remove('fade-in-desktop-active'); 
                }
                setTimeout(() => {
                    modalWrapper.classList.add('modal-hidden');
                    modalWrapper.classList.remove('modal-visible');
                }, 300); // Match animation duration (was 400, now 300 for faster feel)
            }
        }
        
        if(openModalBtn) {
            openModalBtn.addEventListener('click', showAirdropModal);
        }
        if(modalWrapper) {
            modalWrapper.addEventListener('click', function(event) {
                if (event.target === modalWrapper) {
                    hideAirdropModal();
                }
            });
        }


        // --- Theme Management ---
        function applyTheme(themeName) {
            document.body.classList.remove('theme-default', 'theme-cyberpunk', 'theme-forest', 'theme-sunset', 'theme-oceanic');
            document.body.classList.add(themeName); 
            modal.classList.remove('theme-default', 'theme-cyberpunk', 'theme-forest', 'theme-sunset', 'theme-oceanic');
            modal.classList.add(themeName);
            APP_CONFIG.CURRENT_THEME = themeName;
            updateDynamicThemeStyles();
        }

        function updateDynamicThemeStyles() {
            if (APP_CONFIG.CURRENT_THEME === 'theme-cyberpunk') {
                appLogoEl.src = APP_CONFIG.APP_LOGO_CYBER;
            } else if (APP_CONFIG.CURRENT_THEME === 'theme-forest') {
                appLogoEl.src = APP_CONFIG.APP_LOGO_FOREST;
            } else if (APP_CONFIG.CURRENT_THEME === 'theme-sunset') {
                appLogoEl.src = APP_CONFIG.APP_LOGO_SUNSET;
            } else if (APP_CONFIG.CURRENT_THEME === 'theme-oceanic') {
                appLogoEl.src = APP_CONFIG.APP_LOGO_OCEANIC;
            } else {
                appLogoEl.src = APP_CONFIG.APP_LOGO_DEFAULT;
            }
            setCSSVariablesForTheme(APP_CONFIG.CURRENT_THEME);
        }
        
        function getTailwindColors() {
            try {
                if (window.tailwind && window.tailwind.resolved && window.tailwind.resolved.theme && window.tailwind.resolved.theme.colors) {
                     return window.tailwind.resolved.theme.colors;
                }
                if (window.tailwind && window.tailwind.config && window.tailwind.config.theme && window.tailwind.config.theme.extend && window.tailwind.config.theme.extend.colors) {
                    return window.tailwind.config.theme.extend.colors;
                }
            } catch (e) { console.warn("Could not fully resolve Tailwind theme colors for JS, using fallbacks.", e); }
            return { 
                'web3-primary': { DEFAULT: '#2563EB', rgb: '37, 99, 235', textOn: '#FFFFFF' }, 
                'web3-success': { DEFAULT: '#10B981', particle: '#34D399', textOn: '#FFFFFF' },
                'cyber-primary': { DEFAULT: '#00F0FF', rgb: '0, 240, 255', textOn: '#0C0C1A' }, 
                'cyber-success': { DEFAULT: '#00FF7F', particle: '#00FF7F', textOn: '#0C0C1A' },
                'forest-primary': { DEFAULT: '#228B22', rgb: '34, 139, 34', textOn: '#FFFFFF' }, 
                'forest-success': { DEFAULT: '#32CD32', particle: '#32CD32', textOn: '#FFFFFF' },
                'sunset-primary': { DEFAULT: '#FF7F50', rgb: '255, 127, 80', textOn: '#FFFFFF' },
                'sunset-success': { DEFAULT: '#FFB347', particle: '#FFB347', textOn: '#2C1A0B' },
                'oceanic-primary': { DEFAULT: '#00CED1', rgb: '0, 206, 209', textOn: '#FFFFFF' },
                'oceanic-success': { DEFAULT: '#3CB371', particle: '#3CB371', textOn: '#FFFFFF' },
                 'web3-surface': { light: '#FFFFFF', dark: '#111827' }, 
                 'cyber-surface': { light: '#2A2A3E', dark: '#171727' },
                 'forest-surface': { light: '#FFFFFF', dark: '#223322' },
                 'sunset-surface': { light: '#FFFFFF', dark: '#4A2A0A' },
                 'oceanic-surface': { light: '#FFFFFF', dark: '#113C4A' }
            };
        }

        function setCSSVariablesForTheme(themeName) {
            const root = document.documentElement;
            const twColors = getTailwindColors(); 
            let colors = {};
            let currentThemePrefix = themeName === 'theme-default' ? 'web3' : themeName.replace('theme-', '');
            
            const getColorProp = (themePrefix, colorName, prop, fallback) => {
                const themeColorObj = twColors[`${themePrefix}-${colorName}`]; 
                if (themeColorObj && typeof themeColorObj === 'object' && themeColorObj[prop] !== undefined) { 
                    return themeColorObj[prop];
                }
                if (themeColorObj && typeof themeColorObj === 'string' && (prop === 'DEFAULT' || prop === 'particle')) {
                    return themeColorObj;
                }
                if (prop === 'textOn') {
                    const bgColor = themeColorObj && themeColorObj.DEFAULT ? themeColorObj.DEFAULT : (themeColorObj || '#000000');
                    if (typeof bgColor === 'string' && bgColor.startsWith('#')) {
                        const r = parseInt(bgColor.slice(1, 3), 16);
                        const g = parseInt(bgColor.slice(3, 5), 16);
                        const b = parseInt(bgColor.slice(5, 7), 16);
                        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
                        return brightness > 128 ? '#000000' : '#FFFFFF';
                    }
                    return fallback || '#FFFFFF';
                }
                return fallback;
            };

            colors = {
                particle: getColorProp(currentThemePrefix, 'success', 'particle', '#34D399'),
                primaryRgb: getColorProp(currentThemePrefix, 'primary', 'rgb', '37, 99, 235'),
            };
            colors.pulseNodeAlpha = `rgba(${colors.primaryRgb}, 0.4)`;

            root.style.setProperty('--particle-color', colors.particle);
            root.style.setProperty('--pulse-node-color-alpha', colors.pulseNodeAlpha);
            
            const surfaceColorKey = `${currentThemePrefix}-surface`;
            const surfaceColorObject = twColors[surfaceColorKey] || twColors['web3-surface']; 
            const isDark = document.documentElement.classList.contains('dark');
            root.style.setProperty('--theme-bg-surface', isDark ? (surfaceColorObject.dark || '#111827') : (surfaceColorObject.light || '#FFFFFF'));
        }


        function initializeApp() {
            appNameEl.textContent = APP_CONFIG.APP_NAME;
            projectDescEl.textContent = APP_CONFIG.PROJECT_DESC;
            
            applyTheme(APP_CONFIG.CURRENT_THEME); 

            // Removed localStorage for theme persistence
            if (APP_CONFIG.FORCE_LIGHT_DARK_MODE === 'dark') {
                 document.documentElement.classList.add('dark');
            } else if (APP_CONFIG.FORCE_LIGHT_DARK_MODE === 'light') {
                 document.documentElement.classList.remove('dark');
            } else { // Follow system if no force
                 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.documentElement.classList.add('dark');
                 } else {
                    document.documentElement.classList.remove('dark');
                 }
            }
            
            startCountdown();
            const startDate = new Date(2025, 4, 1); 
            const endDateForCalc = new Date(APP_CONFIG.END_DATE_STRING);
            const currentDate = new Date(); 
            
            let exampleProgress = 0;
            if (currentDate >= startDate) { 
                 if (currentDate < endDateForCalc) {
                    exampleProgress = ((currentDate - startDate) / (endDateForCalc - startDate)) * 100;
                } else { 
                    exampleProgress = 100;
                }
            }
            timelineProgress.style.width = `${Math.min(100, Math.max(0, exampleProgress))}%`;
            
            const timelineNodes = modal.querySelectorAll('.timeline-node');
            timelineNodes.forEach(node => node.classList.remove('completed', 'active')); 

            if (exampleProgress >= 0 && timelineNodes.length > 0) timelineNodes[0].classList.add('completed');
            if (exampleProgress < 100 && exampleProgress >= 0 && timelineNodes.length > 1) { 
                timelineNodes[1].classList.add('active');
            } else if (exampleProgress >=100 && timelineNodes.length > 2) { 
                if(timelineNodes[1]) timelineNodes[1].classList.add('completed');
                if(timelineNodes[2]) timelineNodes[2].classList.add('completed'); 
            }

            showState('query-state'); 
            setThemeSpecificStyles(); 
        }
        
        function setThemeSpecificStyles() {
            const isDark = document.documentElement.classList.contains('dark');
            const currentTheme = APP_CONFIG.CURRENT_THEME;
            let p = currentTheme === 'theme-default' ? 'web3' : currentTheme.replace('theme-', ''); 
            const twColors = getTailwindColors();

            const cls = (styles) => styles.join(' ');
            const themePattern = new RegExp(`(bg|text|border|ring|hover:bg|focus:ring|placeholder:text)-(web3|cyber|forest|sunset|oceanic)-[\\w-]+(?:\\/[\\d]+)?`, 'g');
            
            document.querySelectorAll('[class*="-web3-"], [class*="-cyber-"], [class*="-forest-"], [class*="-sunset-"], [class*="-oceanic-"]').forEach(el => {
                 if (el.closest && el.closest('#theme-switcher-controls')) return; 
                 el.className = el.className.replace(themePattern, '').replace(/\s\s+/g, ' ').trim();
            });
             document.body.className = document.body.className.replace(themePattern, '').replace(/\s\s+/g, ' ').trim();
             document.body.classList.add(currentTheme); 
             if(isDark) document.documentElement.classList.add('dark'); else document.documentElement.classList.remove('dark');

            document.body.classList.add(isDark ? `bg-${p}-bg-dark` : `bg-${p}-bg-light`); 
            modal.classList.add(isDark ? `bg-${p}-surface-dark` : `bg-${p}-surface-light`, isDark ? `text-${p}-text-dark` : `text-${p}-text-light`);
            
            const applyClasses = (selector, lightClasses, darkClasses) => {
                const el = modal.querySelector(selector);
                if (el) {
                    const classesToRemove = [...lightClasses, ...darkClasses].filter(c => typeof c === 'string' && c.length > 0);
                    el.classList.remove(...classesToRemove); 
                    el.classList.add(...(isDark ? darkClasses : lightClasses).filter(c => typeof c === 'string' && c.length > 0));
                }
            };
            const applyToAll = (selector, lightClasses, darkClasses) => {
                modal.querySelectorAll(selector).forEach(el => {
                    const classesToRemove = [...lightClasses, ...darkClasses].filter(c => typeof c === 'string' && c.length > 0);
                    el.classList.remove(...classesToRemove); 
                    el.classList.add(...(isDark ? darkClasses : lightClasses).filter(c => typeof c === 'string' && c.length > 0));
                });
            };
            
            const getTextOnColor = (themePrefix, colorCategory, fallback = '#FFFFFF') => {
                const colorConfig = twColors[`${themePrefix}-${colorCategory}`];
                if (colorConfig && colorConfig.textOn) {
                    return colorConfig.textOn;
                }
                const bgColor = colorConfig && colorConfig.DEFAULT ? colorConfig.DEFAULT : (colorConfig || '#000000');
                 if (typeof bgColor === 'string' && bgColor.startsWith('#')) {
                    const r = parseInt(bgColor.slice(1, 3), 16);
                    const g = parseInt(bgColor.slice(3, 5), 16);
                    const b = parseInt(bgColor.slice(5, 7), 16);
                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
                    return brightness > 128 ? (isDark ? '#E5E7EB' : '#1F2937') : (isDark ? '#030712' : '#FFFFFF'); 
                }
                return fallback;
            };

            applyClasses('.modal-header', [`border-${p}-border-light`], [`border-${p}-border-dark`]);
            applyClasses('.footer-bg', [isDark ? `bg-${p}-surface-dark` : `bg-${p}-surface-light`], [isDark ? `bg-${p}-surface-dark` : `bg-${p}-surface-light`]);
            applyClasses('.footer-border', [`border-${p}-border-light`], [`border-${p}-border-dark`]);
            applyClasses('.footer-text-color', [`text-${p}-text-secondary-light`], [`text-${p}-text-secondary-dark`]);
            
            applyClasses('.project-desc-bg', [`bg-${p}-secondary-light`, 'bg-opacity-60'], [`bg-${p}-secondary-dark`, 'bg-opacity-60']);
            applyClasses('#project-desc-text', [`text-${p}-text-secondary-light`], [`text-${p}-text-secondary-dark`]);

            applyClasses('.status-card-bg', [isDark ? `bg-${p}-surface-dark` : `bg-gray-50`], [isDark ? `bg-${p}-surface-dark` : `bg-gray-50`]);
            applyClasses('.status-text-color', [`text-${p}-text-light`], [`text-${p}-text-dark`]);
            applyClasses('.status-tag-bg', [`bg-${p}-success-light`, 'bg-opacity-30'], [`bg-${p}-success-dark`, 'bg-opacity-30']);
            applyClasses('.status-tag-text-color', [`text-${p}-success-DEFAULT`], [`text-${p}-success-dark`]);
            applyClasses('.status-indicator-color', [`bg-${p}-success-DEFAULT`], [`bg-${p}-success-DEFAULT`]);

            applyClasses('.countdown-label-color', [`text-${p}-text-secondary-light`], [`text-${p}-text-secondary-dark`]);
            applyClasses('.countdown-value-color', [`text-${p}-text-light`], [`text-${p}-text-dark`]);
            applyToAll('.countdown-unit-bg', [isDark ? `bg-${p}-border-dark` : `bg-gray-200`], [isDark ? `bg-${p}-border-dark` : `bg-gray-200`]);
            applyToAll('.countdown-unit-label-color', [`text-${p}-text-secondary-light`], [`text-${p}-text-secondary-dark`]);
            
            applyClasses('#timeline-progress', [`bg-${p}-primary-DEFAULT`], [`bg-${p}-primary-DEFAULT`]);
            modal.querySelectorAll('.timeline-node').forEach(node => {
                node.classList.remove(`border-${p}-primary-light`, `border-${p}-primary-dark`, `text-${p}-primary-DEFAULT`, `text-${p}-text-secondary-light`, `text-${p}-text-secondary-dark`);
                node.classList.add(isDark ? `border-${p}-primary-dark` : `border-${p}-primary-light`);
                if(node.classList.contains('active')) node.classList.add(`text-${p}-primary-DEFAULT`); else node.classList.add(isDark ? `text-${p}-text-secondary-dark` : `text-${p}-text-secondary-light`);
            });
            applyToAll('.timeline-label-color', [`text-${p}-text-secondary-light`], [`text-${p}-text-secondary-dark`]);
            applyToAll('.timeline-date-color', [`text-gray-400`], [`text-gray-500`]);
            applyClasses('.timeline-connector', [`bg-gray-300`], [`bg-${p}-border-dark`]);

            const queryBtnTextOnColor = getTextOnColor(p, 'primary');
            addressInput.className = `w-full h-14 px-5 py-3 pr-16 text-base border rounded-xl focus:ring-2 outline-none transition-all duration-200 shadow-sm ${cls([isDark ? `bg-${p}-bg-dark` : `bg-${p}-bg-light`, isDark ? `text-${p}-text-dark` : `text-${p}-text-light`, isDark ? `border-${p}-border-dark` : `border-${p}-border-light`, `focus:ring-${p}-primary-DEFAULT`, `placeholder:text-${isDark? p+'-text-secondary-dark' : p+'-text-secondary-light'}`])}`;
            connectWalletBtn.className = `absolute right-3 top-1/2 transform -translate-y-1/2 p-2.5 rounded-lg transition-colors ${cls([`text-${p}-primary-DEFAULT`, isDark ? `hover:bg-gray-700` : `hover:bg-blue-100`, 'hover:bg-opacity-50'])}`;
            queryButton.className = `w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 shadow-md hover:shadow-lg ${cls([`bg-${p}-primary-DEFAULT`, `hover:bg-${p}-primary-dark`, `focus:ring-offset-${isDark ? p+'-surface-dark' : p+'-surface-light'}`, `focus:ring-${p}-primary-DEFAULT`])}`;
            queryButton.style.color = queryBtnTextOnColor; 

            loadingAddressInput.className = `w-full h-14 px-5 py-3 text-base border rounded-xl cursor-not-allowed ${cls([isDark ? `bg-gray-700 text-gray-400 border-gray-600` : `bg-gray-100 text-gray-500 border-gray-300`])}`;
            modal.querySelector('#loading-state button').className = `w-full h-14 text-lg text-white font-semibold rounded-xl flex items-center justify-center space-x-2.5 cursor-not-allowed shadow-md ${cls([isDark ? `bg-gray-600` : `bg-gray-400`])}`;
            applyClasses('.loading-text-color', [`text-${p}-text-secondary-light`], [`text-${p}-text-secondary-dark`]);
            
            const loaderEl = modal.querySelector('#loading-state .loader'); 
            if (loaderEl) {
                loaderEl.className = `loader ${isDark ? 'border-'+(p === 'web3' ? 'loader-border-dark' : 'loader-border-'+p) : 'border-'+(p === 'web3' ? 'loader-border-light' : 'loader-border-'+p)} ${isDark ? 'border-t-'+(p === 'web3' ? 'loader-top-dark' : 'loader-top-'+p) : 'border-t-'+(p === 'web3' ? 'loader-top-light' : 'loader-top-'+p)}`;
            }

            applyClasses('.success-card-bg', [`bg-${p}-success-light`, 'bg-opacity-20'], [`bg-${p}-success-dark`, 'bg-opacity-20']);
            applyClasses('.success-card-border', [`border-${p}-success-light`, 'border-opacity-30'], [`border-${p}-success-dark`, 'border-opacity-30']);
            applyClasses('.success-icon-outer-bg', [`bg-${p}-success-light`, 'bg-opacity-30'], [`bg-${p}-success-dark`, 'bg-opacity-30']);
            applyClasses('.success-icon-inner-bg', [`bg-${p}-success-light`, 'bg-opacity-50'], [`bg-${p}-success-dark`, 'bg-opacity-50']);
            applyClasses('.success-icon-color', [`text-${p}-success-DEFAULT`], [`text-${p}-success-light`]);
            applyClasses('.success-title-color', [`text-${p}-success-dark`], [`text-${p}-success-light`]);
            applyClasses('.claim-details-bg', [isDark ? `bg-${p}-surface-dark` : `bg-white`], [isDark ? `bg-${p}-surface-dark` : `bg-white`]);
            applyClasses('.claim-details-label-color', [`text-gray-600`], [isDark ? `text-${p}-text-secondary-dark` : `text-gray-600`]);
            applyClasses('.claim-details-value-color', [`text-gray-800`], [isDark ? `text-${p}-text-dark` : `text-gray-800`]);
            applyClasses('.claim-details-usd-color', [`text-gray-500`], [isDark ? `text-${p}-text-secondary-dark` : `text-gray-500`]);
            
            const claimBtnTextOnColor = getTextOnColor(p, 'success');
            claimButton.className = `w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 shadow-md hover:shadow-lg ${cls([`bg-${p}-success-DEFAULT`, `hover:bg-${p}-success-dark`, `focus:ring-offset-${isDark ? p+'-success-dark' : p+'-success-light'}`, `focus:ring-${p}-success-DEFAULT`])}`;
            claimButton.style.color = claimBtnTextOnColor;
            if (claimButton.disabled) { 
                 claimButton.classList.remove(`bg-${p}-success-DEFAULT`, `hover:bg-${p}-success-dark`);
                 claimButton.classList.add(isDark ? `bg-gray-600` : `bg-gray-400`, 'cursor-not-allowed', 'opacity-70');
                 claimButton.style.color = isDark ? '#9CA3AF' : '#4B5563'; 
            }


            applyClasses('.failure-card-bg', [`bg-${p}-error-light`, 'bg-opacity-20'], [`bg-${p}-error-dark`, 'bg-opacity-20']);
            applyClasses('.failure-card-border', [`border-${p}-error-light`, 'border-opacity-30'], [`border-${p}-error-dark`, 'border-opacity-30']);
            applyClasses('.failure-icon-color', [`text-${p}-error-DEFAULT`], [`text-${p}-error-light`]);
            applyClasses('.failure-title-color', [`text-${p}-error-dark`], [`text-${p}-error-light`]);
            applyClasses('.failure-text-color', [`text-gray-600`], [isDark ? `text-${p}-text-secondary-dark` : `text-gray-600`]);
            
            const recheckBtnTextLight = `text-gray-700`;
            const recheckBtnTextDark = `text-gray-200`;
            recheckButton.className = `w-full h-14 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 shadow-md hover:shadow-lg ${cls([isDark ? `bg-gray-600 hover:bg-gray-500 ${recheckBtnTextDark}` : `bg-gray-200 hover:bg-gray-300 ${recheckBtnTextLight}`, `focus:ring-offset-${isDark ? p+'-surface-dark' : p+'-surface-light'}`, `focus:ring-gray-400`])}`;
        }


        function showState(stateId) {
            [queryStateEl, loadingStateEl, successStateEl, failureStateEl].forEach(el => {
                el.classList.add('hidden');
                el.classList.remove('active');
            });
            const activeStateEl = document.getElementById(stateId);
            const timelineSection = document.getElementById('timeline-status-section');

            if (activeStateEl) {
                activeStateEl.classList.remove('hidden');
                activeStateEl.classList.add('active');
                if (stateId === 'success-state') createParticles();

                if (stateId === 'loading-state') {
                    loadingOverlay.classList.remove('hidden');
                    requestAnimationFrame(() => loadingOverlay.style.opacity = '1'); 
                    if(timelineSection) timelineSection.classList.remove('hidden-for-result'); 
                } else {
                    loadingOverlay.style.opacity = '0';
                    setTimeout(() => loadingOverlay.classList.add('hidden'), 300); 
                    if (stateId === 'success-state' || stateId === 'failure-state') {
                        if(timelineSection) timelineSection.classList.add('hidden-for-result');
                    } else {
                         if(timelineSection) timelineSection.classList.remove('hidden-for-result');
                    }
                }
            }
        }
        
        function createParticles() {
            if (!successParticlesContainer) return;
            successParticlesContainer.innerHTML = ''; 
            const particleColor = getComputedStyle(document.documentElement).getPropertyValue('--particle-color').trim() || '#34D399';
            for (let i = 0; i < 25; i++) { 
                const particle = document.createElement('div');
                particle.classList.add('particle');
                particle.style.backgroundColor = particleColor;
                
                const startX = Math.random() * 70 + 15; 
                const startY = Math.random() * 40 + 30; 

                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 150 + 70; 
                const endX = startX + Math.cos(angle) * distance;
                const endY = startY + Math.sin(angle) * distance;

                particle.style.setProperty('--start-x', `${startX}%`);
                particle.style.setProperty('--start-y', `${startY}%`);
                particle.style.setProperty('--end-x', `${endX}%`);
                particle.style.setProperty('--end-y', `${endY}%`);
                
                particle.style.animationDelay = `${Math.random() * 1}s`; 
                successParticlesContainer.appendChild(particle);
            }
        }

        let countdownInterval;
        function startCountdown() {
            const endDate = new Date(APP_CONFIG.END_DATE_STRING).getTime();
            if (isNaN(endDate)) {
                console.error("Invalid end date config: ", APP_CONFIG.END_DATE_STRING);
                [daysValueEl, hoursValueEl, minutesValueEl, secondsValueEl].forEach(el => { if(el) el.textContent = '--';});
                return;
            }

            function updateDisplay() {
                const now = new Date().getTime();
                const distance = endDate - now;

                if (distance < 0) {
                    clearInterval(countdownInterval);
                    if(daysValueEl) daysValueEl.textContent = '00'; 
                    if(hoursValueEl) hoursValueEl.textContent = '00';
                    if(minutesValueEl) minutesValueEl.textContent = '00';
                    if(secondsValueEl) secondsValueEl.textContent = '00';
                    const countdownLabel = document.getElementById('countdown-display')?.parentElement?.querySelector('p');
                    if(countdownLabel) countdownLabel.textContent = "Event Ended";
                    return;
                }

                const d = Math.floor(distance / (1000 * 60 * 60 * 24));
                const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const s = Math.floor((distance % (1000 * 60)) / 1000);

                if(daysValueEl) animateFlip(daysValueEl, String(d).padStart(2, '0'));
                if(hoursValueEl) animateFlip(hoursValueEl, String(h).padStart(2, '0'));
                if(minutesValueEl) animateFlip(minutesValueEl, String(m).padStart(2, '0'));
                if(secondsValueEl) animateFlip(secondsValueEl, String(s).padStart(2, '0'));
                
                const secondsValEl = secondsValueEl;
                if (!secondsValEl) return;

                const currentTheme = APP_CONFIG.CURRENT_THEME;
                let p = currentTheme === 'theme-default' ? 'web3' : currentTheme.replace('theme-', '');
                const isDark = document.documentElement.classList.contains('dark');

                const baseClasses = ['p-2.5', 'rounded-lg', 'shadow-inner'];
                let dynamicClasses = [];
                const colorPattern = /(bg|text)-((web3|cyber|forest|sunset|oceanic)-)?(error|warning|border|gray)-[\w-]+(?:L\/\d+|\/\d+)?|font-(bold|semibold)/g; 


                if (distance < 60 * 1000) { 
                    dynamicClasses = [isDark ? `bg-${p}-error-dark` : `bg-${p}-error-light`, 'bg-opacity-80', isDark ? `text-${p}-error-light` : `text-${p}-error-DEFAULT`, 'font-bold'];
                } else if (distance < 10 * 60 * 1000) { 
                    dynamicClasses = [isDark ? `bg-${p}-warning-dark` : `bg-${p}-warning-light`, 'bg-opacity-80', isDark ? `text-${p}-warning-light` : `text-${p}-warning-DEFAULT`, 'font-semibold'];
                } else { 
                    const siblingBgClass = minutesValueEl ? Array.from(minutesValueEl.classList).find(c => c.startsWith('bg-') && !c.includes('opacity')) : (isDark ? `bg-${p}-border-dark` : `bg-gray-200`);
                    const siblingTextClass = minutesValueEl ? Array.from(minutesValueEl.classList).find(c => c.startsWith('text-')) : (isDark ? `text-${p}-text-dark` : `text-${p}-text-light`);
                    dynamicClasses = [siblingBgClass, siblingTextClass].filter(Boolean);
                }
                
                secondsValEl.className = secondsValEl.className.replace(colorPattern, '').replace(/\s\s+/g, ' ').trim();
                secondsValEl.classList.add(...baseClasses, ...dynamicClasses);
            }
            
            function animateFlip(element, newValue) {
                if (!element || element.textContent === newValue) return; 
                
                const flipContainer = element.parentElement; 
                if (flipContainer.classList.contains('is-flipping')) return; 

                flipContainer.classList.add('is-flipping');
                element.classList.add('flip-animate');
                element.textContent = newValue;
                setTimeout(() => {
                    if (element) element.classList.remove('flip-animate');
                    if (flipContainer) flipContainer.classList.remove('is-flipping');
                }, 480); 
            }

            if(daysValueEl && hoursValueEl && minutesValueEl && secondsValueEl) { 
                updateDisplay();
                clearInterval(countdownInterval); 
                countdownInterval = setInterval(updateDisplay, 1000);
            } else { console.warn("Countdown display elements not found. Countdown not started."); }
        }
        
        queryButton.addEventListener('click', () => {
            const address = addressInput.value.trim();
            const p = APP_CONFIG.CURRENT_THEME === 'theme-default' ? 'web3' : APP_CONFIG.CURRENT_THEME.replace('theme-', '');
            addressInput.classList.remove(`border-${p}-error-DEFAULT`, `focus:ring-${p}-error-DEFAULT`);
            if (!address || !address.startsWith('0x') || address.length !== 42) {
                addressInput.classList.add(`border-${p}-error-DEFAULT`, `focus:ring-${p}-error-DEFAULT`);
                addressInput.focus();
                return;
            }
            loadingAddressInput.value = address; 
            simulateQuery(address);
        });

        connectWalletBtn.addEventListener('click', async () => {
            connectWalletBtn.disabled = true;
            const originalIcon = connectWalletBtn.innerHTML;
            const loaderDiv = document.createElement('div');
            const p = APP_CONFIG.CURRENT_THEME === 'theme-default' ? 'web3' : APP_CONFIG.CURRENT_THEME.replace('theme-', '');
            const isDark = document.documentElement.classList.contains('dark');
            loaderDiv.className = `loader !w-5 !h-5 !border-2 ${isDark ? 'border-'+(p === 'web3' ? 'loader-border-dark' : 'loader-border-'+p) : 'border-'+(p === 'web3' ? 'loader-border-light' : 'loader-border-'+p)} ${isDark ? 'border-t-'+(p === 'web3' ? 'loader-top-dark' : 'loader-top-'+p) : 'border-t-'+(p === 'web3' ? 'loader-top-light' : 'loader-top-'+p)}`;
            connectWalletBtn.innerHTML = '';
            connectWalletBtn.appendChild(loaderDiv);

            try {
                await new Promise(resolve => setTimeout(resolve, 1500));
                const mockAddress = '0x' + Array(40).fill(0).map(() => Math.floor(Math.random() * 16).toString(16)).join('');
                addressInput.value = mockAddress;
                addressInput.focus();
            } catch (error) { console.error("Connect wallet failed:", error); alert("Failed to connect wallet. Please try again.");
            } finally { connectWalletBtn.disabled = false; connectWalletBtn.innerHTML = originalIcon; }
        });

        recheckButton.addEventListener('click', () => {
            addressInput.value = '';
            const p = APP_CONFIG.CURRENT_THEME === 'theme-default' ? 'web3' : APP_CONFIG.CURRENT_THEME.replace('theme-', '');
            addressInput.classList.remove(`border-${p}-error-DEFAULT`, `focus:ring-${p}-error-DEFAULT`); 
            showState('query-state');
            addressInput.focus();
        });

        claimButton.addEventListener('click', () => {
            claimButton.disabled = true;
            const loaderDiv = document.createElement('div');
            loaderDiv.className = `loader !border-white/60 !border-t-white !w-6 !h-6 !border-2 mr-2.5`;
            claimButton.innerHTML = '';
            claimButton.appendChild(loaderDiv);
            const textSpan = document.createElement('span');
            textSpan.textContent = 'Processing...';
            claimButton.appendChild(textSpan);

            setTimeout(() => {
                claimButton.textContent = "Claimed";
                const p = APP_CONFIG.CURRENT_THEME === 'theme-default' ? 'web3' : APP_CONFIG.CURRENT_THEME.replace('theme-', '');
                const isDark = document.documentElement.classList.contains('dark');
                // Clear active styles
                claimButton.classList.remove(`bg-${p}-success-DEFAULT`, `hover:bg-${p}-success-dark`);
                claimButton.style.color = ''; // Reset inline style for text color
                // Add disabled styles
                claimButton.classList.add(isDark ? `bg-gray-600` : `bg-gray-400`, 'cursor-not-allowed', 'opacity-70');
                claimButton.style.color = isDark ? '#9CA3AF' : '#4B5563'; // Explicitly set disabled text color
                alert('Airdrop claimed successfully! (Simulated)');
            }, 2000);
        });
        
        function simulateQuery(address) {
            showState('loading-state');
            setTimeout(() => {
                const isEligible = Math.random() > 0.8; 
                if (isEligible) {
                    const amount = (Math.random() * 1000 + 50).toFixed(2);
                    const price = (Math.random() * 0.5 + 0.1).toFixed(4);
                    APP_CONFIG.MOCK_ELIGIBLE_AMOUNT = amount;
                    APP_CONFIG.MOCK_USD_PRICE_PER_TOKEN = price;
                    if (claimAmountTokenEl) claimAmountTokenEl.textContent = `${amount} ${APP_CONFIG.CLAIM_COIN_SYMBOL}`;
                    if (claimAmountUsdEl) claimAmountUsdEl.textContent = `≈ $${(amount * price).toFixed(2)} USD`;
                    
                    claimButton.disabled = false;
                    claimButton.textContent = "Claim Now";
                    const p = APP_CONFIG.CURRENT_THEME === 'theme-default' ? 'web3' : APP_CONFIG.CURRENT_THEME.replace('theme-', '');
                    const isDark = document.documentElement.classList.contains('dark');
                    // Clear disabled styles
                    claimButton.classList.remove(isDark ? `bg-gray-600` : `bg-gray-400`, 'cursor-not-allowed', 'opacity-70');
                    claimButton.style.color = ''; // Reset inline style
                    // Add active styles (setThemeSpecificStyles will handle this based on class)
                    claimButton.classList.add(`bg-${p}-success-DEFAULT`, `hover:bg-${p}-success-dark`);
                    // Explicitly set text color for claim button after re-enabling
                    const claimBtnTextOnColor = getTailwindColors()[`${p}-success`]?.textOn || (isDark ? '#FFFFFF' : '#000000'); // Safer access
                    claimButton.style.color = claimBtnTextOnColor;

                    showState('success-state');
                } else {
                    showState('failure-state');
                }
            }, 2500);
        }

        const dragIndicator = modal.querySelector('.sm\\:block.md\\:hidden.pt-3.pb-2');
        if (dragIndicator) {
            let startY, initialModalHeight, currentTranslateY = 0;
            dragIndicator.addEventListener('touchstart', (e) => {
                if (e.touches.length !== 1) return;
                startY = e.touches[0].clientY;
                modal.style.transition = 'none'; 
                initialModalHeight = modal.offsetHeight;
                currentTranslateY = 0; 
            }, { passive: true });

            dragIndicator.addEventListener('touchmove', (e) => {
                if (e.touches.length !== 1 || typeof startY === 'undefined') return;
                const deltaY = e.touches[0].clientY - startY;
                if (deltaY > 0) { 
                    currentTranslateY = deltaY;
                    modal.style.transform = `translateY(${currentTranslateY}px)`;
                }
            }, { passive: true });

            dragIndicator.addEventListener('touchend', () => {
                if (typeof startY === 'undefined') return;
                modal.style.transition = 'transform 0.3s ease-out'; 
                if (currentTranslateY > initialModalHeight * 0.3) { 
                    hideAirdropModal(); 
                     setTimeout(() => {
                        modal.style.transform = 'translateY(100%)'; 
                        showState('query-state'); 
                        addressInput.value = '';
                        const p = APP_CONFIG.CURRENT_THEME === 'theme-default' ? 'web3' : APP_CONFIG.CURRENT_THEME.replace('theme-', '');
                        addressInput.classList.remove(`border-${p}-error-DEFAULT`, `focus:ring-${p}-error-DEFAULT`);
                    }, 300); 
                } else {
                    modal.style.transform = 'translateY(0)'; 
                }
                startY = undefined; 
            });
        }
        
        if (themeSwitcherControls) {
            themeSwitcherControls.addEventListener('click', (event) => {
                const button = event.target.closest('button');
                if (!button) return;

                if (button.id === 'toggle-dark-mode') {
                    document.documentElement.classList.toggle('dark');
                    // localStorage.setItem('color-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); // Removed localStorage
                    setThemeSpecificStyles(); 
                     if (successStateEl.classList.contains('active')) createParticles();
                } else {
                    const theme = button.dataset.theme;
                    if (theme) {
                        window.switchAppTheme(theme);
                    }
                }
            });
        }

        document.addEventListener('DOMContentLoaded', initializeApp);

        window.switchAppTheme = function(themeName) { 
            if (['theme-default', 'theme-cyberpunk', 'theme-forest', 'theme-sunset', 'theme-oceanic'].includes(themeName)) {
                APP_CONFIG.CURRENT_THEME = themeName;
                applyTheme(themeName); 
                setThemeSpecificStyles(); 
                if (successStateEl.classList.contains('active')) {
                    createParticles();
                }
                console.log(`Theme switched to: ${themeName}`);
            } else {
                console.error("Invalid theme name. Available: theme-default, theme-cyberpunk, theme-forest, theme-sunset, theme-oceanic");
            }
        }
        console.log("Dev Tip: Call window.switchAppTheme('theme-name') in console to change themes. Or use buttons at top-right.");

    </script>
</body>
</html>
